<template>
  <div class="chart-item small">
    <div class="chart-header">
      <h3>异常监控</h3>
    </div>
    <div class="exception-monitoring">
      <div
        v-for="exception in exceptionList"
        :key="exception.type"
        :class="['exception-card', exception.type]"
        @click="handleExceptionClick(exception)"
      >
        <div class="exception-icon">
          <i :class="exception.icon"></i>
        </div>
        <div class="exception-info">
          <div class="exception-left">
            <div class="exception-title">{{ exception.title }}</div>
            <div class="exception-trend">{{ exception.trend }}</div>
          </div>
          <div class="exception-count">{{ exception.count }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ExceptionMonitor',
  props: {
    exceptionData: {
      type: Object,
      default: () => ({
        overdue: 45,
        overdueChange: 3,
        timeout: 23,
        timeoutChange: 1,
        stagnant: 67,
        stagnantChange: 5,
        highValue: 12,
        highValueAmount: 2456789,
        lowStock: 34,
        lowStockChange: 8,
        expired: 19,
        expiredChange: -2,
        damaged: 15,
        damagedChange: 3,
        misplaced: 8,
        misplacedChange: 1
      })
    }
  },
  computed: {
    exceptionList() {
      return [
        {
          type: 'overdue',
          title: '超期物料',
          count: this.exceptionData.overdue,
          trend: `较昨日 ${this.exceptionData.overdueChange >= 0 ? '+' : ''}${this.exceptionData.overdueChange}`,
          icon: 'el-icon-time'
        },
        {
          type: 'timeout',
          title: '超时在途',
          count: this.exceptionData.timeout,
          trend: `较昨日 ${this.exceptionData.timeoutChange >= 0 ? '+' : ''}${this.exceptionData.timeoutChange}`,
          icon: 'el-icon-warning'
        },
        {
          type: 'stagnant',
          title: '呆滞物料',
          count: this.exceptionData.stagnant,
          trend: `较昨日 ${this.exceptionData.stagnantChange >= 0 ? '+' : ''}${this.exceptionData.stagnantChange}`,
          icon: 'el-icon-remove'
        },
        {
          type: 'high-value',
          title: '高价值异常',
          count: this.exceptionData.highValue,
          trend: `价值 ¥${this.formatNumber(this.exceptionData.highValueAmount)}`,
          icon: 'el-icon-star-on'
        },
        {
          type: 'low-stock',
          title: '库存不足',
          count: this.exceptionData.lowStock,
          trend: `较昨日 ${this.exceptionData.lowStockChange >= 0 ? '+' : ''}${this.exceptionData.lowStockChange}`,
          icon: 'el-icon-bottom'
        },
        {
          type: 'expired',
          title: '过期物料',
          count: this.exceptionData.expired,
          trend: `较昨日 ${this.exceptionData.expiredChange >= 0 ? '+' : ''}${this.exceptionData.expiredChange}`,
          icon: 'el-icon-date'
        },
        {
          type: 'damaged',
          title: '损坏物料',
          count: this.exceptionData.damaged,
          trend: `较昨日 ${this.exceptionData.damagedChange >= 0 ? '+' : ''}${this.exceptionData.damagedChange}`,
          icon: 'el-icon-close'
        },
        {
          type: 'misplaced',
          title: '位置异常',
          count: this.exceptionData.misplaced,
          trend: `较昨日 ${this.exceptionData.misplacedChange >= 0 ? '+' : ''}${this.exceptionData.misplacedChange}`,
          icon: 'el-icon-location-outline'
        }
      ]
    }
  },
  methods: {
    formatNumber(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },

    handleExceptionClick(exception) {
      this.$emit('exception-click', exception)
    }
  }
}
</script>

<style lang="scss" scoped>
.exception-monitoring {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;

  .exception-card {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 50px;

    &:hover {
      background: #e9ecef;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .exception-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      flex-shrink: 0;

      i {
        font-size: 14px;
      }
    }

    .exception-info {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .exception-left {
        flex: 1;
        min-width: 0;

        .exception-title {
          font-size: 12px;
          color: #666;
          margin-bottom: 2px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .exception-trend {
          font-size: 10px;
          color: #999;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .exception-count {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-left: 12px;
        flex-shrink: 0;
      }
    }

    &.overdue {
      .exception-icon {
        background: rgba(255, 127, 0, 0.1);
        i { color: #ff7f00; }
      }
    }

    &.timeout {
      .exception-icon {
        background: rgba(255, 193, 7, 0.1);
        i { color: #ffc107; }
      }
    }

    &.stagnant {
      .exception-icon {
        background: rgba(220, 53, 69, 0.1);
        i { color: #dc3545; }
      }
    }

    &.high-value {
      .exception-icon {
        background: rgba(156, 39, 176, 0.1);
        i { color: #9c27b0; }
      }
    }
  }
}

/* 滚动条样式 */
.exception-monitoring::-webkit-scrollbar {
  width: 4px;
}

.exception-monitoring::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.exception-monitoring::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;

  &:hover {
    background: #a8a8a8;
  }
}
</style>
